<template>
  <div class="__topWrap">
    <div class="item item-left" v-for="(item, i) in totalArr" :key="i">
      <div class="info">
        <div class="label"><img :src="item.ico" />{{ item.label }}<span>({{ item.unit }})</span></div>
        <div class="value">
          <sCountTo :val="item.value" :bg="numBg" color="#fff" :fontSize="40" :width="44" :height="62" />
        </div>
      </div>
    </div>
    <div class="item item-right">
      <div class="list-box" v-for="(item, i) in totalArrRight1" :key="i">
        <div class="label">{{ item.label }} <count-to class="val" :start-val="0" :end-val="item.value"
                                                      :duration="3600" /> <span>{{ item.unit }}</span></div>
      </div>
    </div>
    <div class="item item-right">
      <div class="list-box" v-for="(item, i) in totalArrRight2" :key="i">
        <div class="label">{{ item.label }} <count-to class="val" :start-val="0" :end-val="item.value"
                                                      :duration="3600" /> <span>{{ item.unit }}</span></div>
      </div>
    </div>
    <div class="item item-right">
      <div class="list-box">
        <div class="label">本月招引:</div>
      </div>
      <div class="list-box">
        <div class="label">2338<span>人</span></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'itemCenterTop',
    components: {},
    data() {
      return {
        interval: null,
        totalArr: [
          { ico: require('@/assets/img/ico1.svg'), label: '当前人才总数', value: 108316, unit: '人' },
        ],
        totalArrRight1: [
          { label: '女：', value: 12230, unit: '人' },
          { label: '男：', value: 30440, unit: '人' },
        ],
        totalArrRight2: [
          { label: '硕士：', value: 1289, unit: '人' },
          { label: '博士：', value: 67, unit: '人' },
        ],
        numBg: require('@/assets/img/numbg.svg')
      }
    },
    mounted() {
    },
    beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
    methods: {
      handleStart() {
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          for (let i = 0; i < this.$refs.countTo.length; i++) {
            this.$refs.countTo[i].start()
          }
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      }
    }
  }
</script>


<style scoped lang="scss">
    .__topWrap {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      margin-right: 60px;

      .item {
        display: flex;
        align-items: center;

        .label {
          font-size: 18px;
          font-family: PingFangSC;
          letter-spacing: 1.2px;
          font-weight: normal;
          span {
            margin-left: 4px;
          }
        }

        .value {
          font-size: 26px;
          color: #00FFFA;
          font-family: PingFangSC;
          letter-spacing: 4px;
        }
      }

      .item-left {
        .info {
          .label {
            font-size: 20px;
            text-align: left;
            img {
              margin-right: 3px;
            }
          }
        }
      }

      .item-right {
        background: url('~@/assets/img/itembg.svg') no-repeat;
        background-size: 100% 100%;
        width: 180px;
        height: 106px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0px;
        align-items: center;
        justify-items: center;
        padding: 10px 0;
        position: relative;
        font-size: 18px;
      }
    }
</style>
